<template>
  <div>
    <el-card>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">分布式系统</div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="14" :offset="4"><div class="second-content bg-purple">注意:请在考试开始前校准服务器屏幕右下方的时钟，
        考试过程中调整时钟将导致全体考生需要重新登录系统!</div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="three-content bg-dark">考试监控>>考试任务</div>
      </el-col>
    </el-row>
      <el-card class="box-card">
    <el-row :gutter="20">
      <el-table-column>
      <el-col :span="3"><div class="four-content bg-color">导入试题数据文件：</div></el-col>
      <el-button round>选择文件</el-button>
      <el-button round>确认导入</el-button>
        </el-table-column>
    </el-row>
        <br>
<!--    <el-divider></el-divider>-->
    <el-row :gutter="20">
      <el-table-column>
      <el-col :span="3"><div class="four-content bg-color">全局维护管理功能：</div></el-col>
      <el-button round>清空服务器数据</el-button>
      <el-button round>切换服务器工作模式[当前模式：正常]</el-button>
      </el-table-column>
    </el-row>
<!--    <el-divider></el-divider>-->
      </el-card>
    <div class="six-content">
      <el-card>
      <span>考试服务器已挂载的考试任务：</span>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="management"
          label=""
          width="180">
        </el-table-column>
        <el-table-column
          prop="start"
          label=""
          width="180">
        </el-table-column>
        <el-table-column
          prop="closs"
          label="">
        </el-table-column>
        <el-table-column
          prop="export"
          label="">
        </el-table-column>
        <el-table-column
          prop="name"
          label="考试名称">
        </el-table-column>
        <el-table-column
          prop="explain"
          label="说明">
        </el-table-column>
        <el-table-column
          prop="time"
          label="开始时间-截止时间">
        </el-table-column>
        <el-table-column
          prop="duration"
          label="考试时长">
        </el-table-column>
      </el-table>
      <br>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="40">
        </el-pagination>
      </div>
      </el-card>

    </div>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    }
  },
  data () {
    return {
      tableData: [{
        management: '考场管理',
        start: '开放考试',
        closs: '关闭考试',
        export: '导出答卷',
        name: '-',
        explain: '-',
        time: '-',
        duration: '-'
      }, {
        management: '考场管理',
        start: '开放考试',
        closs: '关闭考试',
        export: '导出答卷',
        name: '-',
        explain: '-',
        time: '-',
        duration: '-'
      }, {
        management: '考场管理',
        start: '开放考试',
        closs: '关闭考试',
        export: '导出答卷',
        name: '-',
        explain: '-',
        time: '-',
        duration: '-'
      }, {
        management: '考场管理',
        start: '开放考试',
        closs: '关闭考试',
        export: '导出答卷',
        name: '-',
        explain: '-',
        time: '-',
        duration: '-'
      }, {
        management: '考场管理',
        start: '开放考试',
        closs: '关闭考试',
        export: '导出答卷',
        name: '-',
        explain: '-',
        time: '-',
        duration: '-'
      }],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4
    }
  }
}
</script>
<style>
.bg-purple-dark {
  background: #abb5f3;
}
.grid-content {
  border-radius: 0px;
  min-height: 50px;
  font-size: 40px;
}
.bg-purple {
  background: #E4E7ED;
  margin: 5px;
  text-align: center;
}
.second-content {
  border-radius: 15px;
  min-height: 30px;
  font-size: 16px;
  text-align: center;
}
.three-content {
  border-radius: 0px;
  min-height: 30px;
  font-size: 20px;
}
.bg-dark {
  background: #7bb4cc;
}
.bg-color {
  background: white;
}
.four-content {
  border-radius: 4px;
  min-height: 20px;
  font-size: 15px;
}
.six-content{
  font-size: 20px;
  /*box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)*/
}
.box-card {
  margin-bottom: 20px;
  margin-top: 20px;
}
.block{
  float: right;
}
</style>
